<template>
  <div class="detail-container">
    <el-form
      ref="postForm"
      :model="postForm"
      label-width="100px"
      label-suffix=":"
    >

      <sticky :z-index="10" :class-name="'sub-navbar ' + postForm.color">
        <el-button v-loading="loading" type="success" @click="submitForm">
          充值
        </el-button>
      </sticky>

      <div class="app-container" style="padding: 10px 20px">
        <refill-help />
        <el-row>
          <el-col :span="6">
            <el-form-item label="ID">
              <el-input v-model="postForm.id" disabled />
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="postForm.mobile" disabled />
            </el-form-item>
            <el-form-item label="余额">
              <el-input v-model="balance" />
              <span>现有: {{ +postForm.account.balance }}</span>
            </el-form-item>
            <el-form-item label="云仓" v-if="false">
              <el-input v-model="store" />
              <span>现有: {{ +postForm.store }}</span>
            </el-form-item>
            <el-form-item label="积分" v-if="false">
              <el-input v-model="score" v-if="false" />
              <span>现有: {{ +postForm.account.score }}</span>
            </el-form-item>
            <el-form-item label="配额" v-if="true">
              <el-input v-model="quota" />
              <span>现有: {{ postForm.account.quota }}</span>
            </el-form-item>
            <el-form-item label="配额2" v-if="true">
              <el-input v-model="quota2" />
              <span>现有: {{ postForm.account.quota2 }}</span>
            </el-form-item>
            <el-form-item label="配额3" v-if="true">
              <el-input v-model="quota3" />
              <span>现有: {{ postForm.account.quota3 }}</span>
            </el-form-item>
            <el-form-item label="配额4" v-if="true">
              <el-input v-model="quota4" />
              <span>现有: {{ postForm.account.quota4 }}</span>
            </el-form-item>
            <el-form-item label="优惠劵" v-if="false">
              <el-input v-model="platform" />
              <span>现有: {{ +postForm.account.platform_ticket }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table
              v-loading="loading"
              :data="balanceList"
              :border="true"
              fit
              style="width: 100%;"
              empty-text="暂无充值记录"
            >
              <el-table-column label="ID" width="80">
                <template slot-scope="{row}">
                  <span>{{ row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="余额">
                <template slot-scope="{row}">
                  <span>{{ +row.balance }}</span>
                </template>
              </el-table-column>
              <el-table-column label="积分" v-if="false">
                <template slot-scope="{row}">
                  <span>{{ +row.score }}</span>
                </template>
              </el-table-column>
              <el-table-column label="购物券" v-if="false">
                <template slot-scope="{row}">
                  <span>{{ +row.ticket }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配额" v-if="true">
                <template slot-scope="{row}">
                  <span>{{ row.quota }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配额2" v-if="true">
                <template slot-scope="{row}">
                  <span>{{ row.quota2 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配额3" v-if="true">
                <template slot-scope="{row}">
                  <span>{{ row.quota3 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配额4" v-if="true">
                <template slot-scope="{row}">
                  <span>{{ row.quota4 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="充值时间">
                <template slot-scope="{row}">
                  <span>{{ row.create_time }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div style="height: 30px;"></div>
        <el-row v-if="false">
          <el-col :span="24">
            <el-table
              v-loading="loading"
              :data="storeList"
              :border="true"
              fit
              style="width: 100%;"
              empty-text="暂无充值记录"
            >
              <el-table-column label="ID" width="80">
                <template slot-scope="{row}">
                  <span>{{ row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column label="充值数量">
                <template slot-scope="{row}">
                  <span>{{ +row.change }}</span>
                </template>
              </el-table-column>
              <el-table-column label="现有">
                <template slot-scope="{row}">
                  <span>{{ +row.num }}</span>
                </template>
              </el-table-column>
              <el-table-column label="充值时间">
                <template slot-scope="{row}">
                  <span>{{ row.create_time }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>

    </el-form>
  </div>
</template>

<script>
import api from '@/api'
import Sticky from '@/components/Sticky'
import RefillHelp from './components/RefillHelp'
export default {
  name: 'MemberRefill',
  components: {
    Sticky,
    RefillHelp
  },
  data() {
    return {
      id: -1,
      loading: false,
      postForm: {
        color: 'draft',
        account: {}
      },
      balance: 0,
      score: 0,
      ticket: 0,
      platform: 0,
      balanceList: [],
      storeList: [],
      store: 0,
      quota: 0,
      quota2: 0,
      quota3: 0,
      quota4: 0
    }
  },
  created() {
    this.id = (this.$route.params && this.$route.params.id) || -1
    this.fetchData(this.id)
    this.getRefillList(this.id)
  },
  methods: {
    async getRefillList(id) {
      this.loading = true
      const response = await api.member.adminRefillList({ user_id: id })
      const data = response.data
      this.balanceList = data.balance
      this.storeList = data.store
      this.loading = false
    },
    async fetchData(id) {
      const response = await api.member.view({ id })
      this.postForm = Object.assign({}, response.data)
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          api.member.adminRefill({
            user_id: this.id,
            balance: this.balance,
            score: this.score,
            ticket: this.ticket,
            platform_ticket: this.platform,
            store: this.store,
            quota: this.quota,
            quota2: this.quota2,
            quota3: this.quota3,
            quota4: this.quota4
          }).then(response => {
            this.loading = false
            this.$notify({
              title: '成功',
              message: response.message,
              type: 'success',
              duration: 2000
            })
            this.$router.push(`/member/refill/${this.$route.params.id}?t=${new Date().getTime()}`)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  },
  beforeRouteUpdate(to, from, next) {
    if (to.path === from.path) {
      const newQuery = Object.assign({}, to.query)
      const oldQuery = Object.assign({}, from.query)
      if (JSON.stringify(newQuery) !== JSON.stringify(oldQuery)) {
        this.id = (this.$route.params && this.$route.params.id) || -1
        this.fetchData(this.id)
        this.getRefillList(this.id)
      }
    }
    next()
  }
}
</script>

<style scoped lang="scss">
.detail-container {
  //
}
</style>
